<template>
  <div class="app-container">
    <el-card class="form-container card-left" shadow="never">
      <el-form :model="data"
               ref="deliverOrderForm"
               label-width="150px"
      >
        <el-form-item label="订单编号：">
          <span class="note-margin">{{ data.order_number }}</span>
        </el-form-item>
        <el-form-item label="收货人：">
          <span class="note-margin">{{ data.receiver_name }}</span>
        </el-form-item>
        <el-form-item label="手机号码：">
          <span class="note-margin">{{ data.mobile }}</span>
        </el-form-item>
        <el-form-item label="收货地址：">
          <span class="note-margin">{{ data.address | formatAddress(data) }}</span>
        </el-form-item>
        <el-form-item label="物流公司：">
          <el-select placeholder="请选择物流公司"
                     v-model="data.delivery_company_id"
                     size="small"
          >
            <el-option v-for="item in companyOptions"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="物流单号：">
          <input type="text" v-model="data.delivery_number">
        </el-form-item>
        <el-form-item>
          <el-button
            @click="confirm('deliverOrderForm')"
            type="primary"
          >发货
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { getRow as getOrder, deliveryOrder } from '@/api/order/order'

const defaultLogisticsCompanies = [{'id':1,'name':'顺丰快递'}, {'id':2,'name':'圆通快递'}, {'id':3,'name':'中通快递'}, {'id':4,'name':'韵达快递'}]
export default {
  name: 'DeliverOrderInfo',
  data() {
    return {
      data: {
        receiver_name: '',
        address: null,
        province: null,
        city: null,
        region: null,
        order_id: null,
        order_number: null,
        delivery_company_id: null,
        delivery_number: null
      },
      companyOptions: defaultLogisticsCompanies
    }
  },
  created() {
    this.data.order_id = Number(this.$route.query.order_id)
    this.getUserAddress()
    this.getOrder()
  },
  filters: {
    formatAddress(v, row) {
      return row.province + row.city + row.region + row.address
    }
  },
  methods: {
    cancel() {
      this.$router.back()
    },
    getUserAddress() {
      getRow({ 'user_address_id': this.$route.query.user_id }).then(resp => {
        this.data.city = resp.data.city
        this.data.province = resp.data.province
        this.data.region = resp.data.region
        this.data.address = resp.data.address
        this.data.mobile = resp.data.mobile
        this.data.email = resp.data.email
        this.data.receiver_name = resp.data.receiver_name
      })
    },
    getOrder() {
      getOrder({ 'id': this.data.order_id }).then(resp => {
        this.data.order_number = resp.data.order_number
      })
    },
    confirm() {
      this.$confirm('是否要进行发货操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let deliveryData = {
          id: this.data.order_id,
          delivery_company_id: this.data.delivery_company_id,
          delivery_number: this.data.delivery_number,
        }
        deliveryOrder(deliveryData).then(response => {
          this.$router.push("/orders/index")
          this.$message({
            type: 'success',
            message: '发货成功!'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消发货'
        })
      })
    }
  }
}
</script>
<style>
.form-container {
  width: 960px;
}

.card-left {
  margin-left: 20%;
}
</style>


